<!DOCTYPE html>
<html>

<head>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <title></title>
    <link rel="stylesheet" href="css/common.css">
    <script src="js/jquery-1.11.1.min.js"></script>
    <script type='text/javascript' src='js/common.js'></script>
    <link rel="stylesheet" href="css/viewport.css">
    <style>
        /* 弹窗样式 */
        .popup {
            display: none;
            position: fixed;
            top: 55%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            padding: 5px 20px;
            border-radius: 10px;
            border: 1px solid #ff0000;
            /* 红色边框 */
            color: #ff0000;
            /* 红色文字 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            text-align: center;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="header">
            <div class="left_btn"><img src="images/left_btn.png" alt=""></div>
            <div class="title">环境改造</div>
        </div>
        <div class="banner">
            <div class="pic"><img width="100%" src="images/banner.png" alt=""></div>
        </div>

        <div class="search_box">
            <div class="content">
                <div class="input_box">
                    <input placeholder="请输入姓名" type="text">
                    <button>查询</button>
                </div>
                <div class="search_data">
                    <div class="list">
                        <div class="label">张某某</div>
                        <div class="label">张某某</div>
                        <div class="label">张某某</div>
                        <div class="label">张某某</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="add_form">
            <div class="row">
                <div class="label">残疾证号：</div>
                <input name="canjirenhao" type="text" />
            </div>
            <div class="row">
                <div class="label">帮扶机构：</div>
            </div>
            <div class="row row3">
                <div class="item">
                    <input type="checkbox" id="myCheckbox" name="myCheckbox" value="checkboxValue">
                    <label for="myCheckbox">浙江省慈善总会</label>
                </div>
                <div class="item">
                    <input type="checkbox" id="myCheckbox" name="myCheckbox" value="checkboxValue">
                    <label for="myCheckbox">浙江省残疾人联合会</label>
                </div>
                <div class="item">
                    <input type="checkbox" id="myCheckbox" name="myCheckbox" value="checkboxValue">
                    <label for="myCheckbox">浙江省慈善总会</label>
                </div>
            </div>
            <div class="row">
                <div class="label">服务内容：</div>
                <input name="content" type="text" />
            </div>
            <div class="row">
                <div class="label">服务人(组织)：</div>
                <input name="content" type="text" class="duan" />
            </div>
            <div class="row">
                <div class="label">服务时间：</div>
                <input type="date" id="timeInput" name="time">
            </div>
        </div>
        <div class="form_table">
            <div class="item1">
                <textarea row="5" placeholder="请填写改造项目"></textarea>
            </div>
            <div class="item2">
                <div class="upload-before">

                    <div class="upload_img_wrap1">
                        <div id="imgBox1" class="imgBox"></div>
                        <div class="upload_img" data-id="1">+</div>
                    </div>
                    <div style="display: none;width: 100%;height: 100vh;position: relative;">
                        <form id="upBox" class="upload_form" action="" method="post" enctype="multipart/form-data">
                            <div style="display: none;" id="inputBox">
                                <input type="file" name="image[]" data-id="1" title="请选择图片" id="file1"
                                    accept="image/png,image/jpg,image/gif,image/JPEG" multiple />
                            </div>
                            <input style="display:none" type="submit" id="sub" />
                        </form>
                    </div>
                    <div class="name">改造前</div>
                </div>
                <div class="upload-after">
                    <div class="upload_img_wrap2">
                        <div id="imgBox2" class="imgBox"></div>
                        <div class="upload_img" data-id="1">+</div>
                    </div>
                    <div style="display: none;width: 100%;height: 100vh;position: relative;">
                        <form id="upBox" class="upload_form" action="" method="post" enctype="multipart/form-data">
                            <div style="display: none;" id="inputBox">
                                <input type="file" name="image[]" data-id="1" title="请选择图片" id="file2"
                                    accept="image/png,image/jpg,image/gif,image/JPEG" multiple />
                            </div>
                            <input style="display:none" type="submit" id="sub" />
                        </form>
                    </div>
                    <div class="name">改造后</div>
                </div>
            </div>
            <div class="my_submit">
                <span>完成</span>
                <span>增加图片</span>
            </div>
            <div class="transform_box">
                <div class="content">
                    <div class="my_list small">
                        <div class="item">
                            <div class="pic">
                                <img src="images/list_pic3.png" alt="">
                                <div class="tips">改造前</div>
                            </div>
                            <div class="my_btn2">
                                <button class="pretty_button del">删除</button>
                                <button class="pretty_button edit">修改</button>
                            </div>
                        </div>
                        <div class="item">
                            <div class="pic">
                                <img src="images/list_pic3.png" alt="">
                                <div class="tips">改造后</div>
                            </div>
                            <div class="my_btn2">
                                <button class="pretty_button del">删除</button>
                                <button class="pretty_button edit">修改</button>
                            </div>
                        </div>
                        <div class="item">
                            <div class="pic">
                                <img src="images/list_pic3.png" alt="">
                                <div class="tips">改造前</div>
                            </div>
                            <div class="my_btn2">
                                <button class="pretty_button del">删除</button>
                                <button class="pretty_button edit">修改</button>
                            </div>
                        </div>
                        <div class="item">
                            <div class="pic">
                                <img src="images/list_pic3.png" alt="">
                                <div class="tips">改造后</div>
                            </div>
                            <div class="my_btn2">
                                <button class="pretty_button del">删除</button>
                                <button class="pretty_button edit">修改</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="more"><span>点击加载更多<img src="images/icon_21.png" alt=""></span></div>
            </div>
        </div>
        <div id="popup" class="popup">请输入完整信息</div>
    </div>

</body>

<script>
    $(function () {
        $('.tab_box span').on('click', function () {
            var index = $(this).index();
            $(this).addClass('active').siblings().removeClass('active');
            $('.list_box').hide();
            $('.list_box' + index).show();
        });
        $('.search_box button').click('click', function () {
            $('.search_data').addClass('active');
        })
    })
</script>

</html>

<script>

    var imgNum = 0;
    $(".upload_img_wrap1 .upload_img").bind("click", function (ev) {
        //console.log(ev.currentTarget.dataset.id)
        var index = ev.currentTarget.dataset.id;
        var that = this;
        $("#file1").click();
        $("#file1").unbind().change(function (e) {
            var index = e.currentTarget.dataset.id;
            if ($('#file1').val() == '') {
                return false;
            }
            var filePath = $(this).val();
            changeImg(e, filePath, index, $("#imgBox1"));

        })
    })

    $(".upload_img_wrap2 .upload_img").bind("click", function (ev) {
        //console.log(ev.currentTarget.dataset.id)
        var index = ev.currentTarget.dataset.id;
        var that = this;
        $("#file2").click();
        $("#file2").unbind().change(function (e) {
            var index = e.currentTarget.dataset.id;
            if ($('#file2').val() == '') {
                return false;
            }
            var filePath = $(this).val();
            changeImg(e, filePath, index, $("#imgBox2"));

        })
    })

    function changeImg(e, filePath, index, dom) {
        fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
        //检查后缀名
        if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
            showError('文件格式必须为：png/jpg/jpeg');
            return;
        }
        //获取并记录图片的base64编码
        var reader = new FileReader();
        reader.readAsDataURL(e.target.files[0]);
        reader.onloadend = function () {
            // 图片的 base64 格式, 可以直接当成 img 的 src 属性值        
            var dataURL = reader.result;
            // console.log(dataURL)
            // 显示图片
            dom.html('');
            dom.html(dom.html() + '<div class="imgContainer" data-index=' + index + '><img   src=' + dataURL + '></div>');
        };

    }


</script>